<template>
	<view>
		<view class="daynav">
			<!-- <view class="daytime" v-for="(item, index) in daylist" :key="index">
				<view class="week" v-if="index == 0">今天</view>
			</view> -->
			<view class="setBox">
				<view class="topBtn" @click="openSetTime">编辑时间段</view>
				<view class="topBtn" @click="openSetRoom">编辑房间</view>
			</view>
			<view class="topBtn" @click="getListDetail">刷新预览</view>
		</view>
		<view>预览效果:</view>
		<view class="Venuebox">
			<scroll-view :scroll-top="scrollTop" scroll-y="true">
				<view class="scroll-Y">
					<view class="Venueleft">
						<view class="noneBox">时间段</view>
						<view class="time" v-for="(item, index) in timeShowList" :key="index">
							{{ item }}
						</view>
					</view>
					<view class="Venuerigth">
						<scroll-view scroll-x="true">
							<view class="scroll-X">
								<view class="placebox" v-for="(item) in fieldList" :key="item.ID">
									<view class="name">{{ item.RoomName }}</view>
									<view class="cost" v-for="(vlaue) in item.TimeCells" :key="vlaue.TimeRangeID">
										{{ '￥' + vlaue.Price }}</view>
								</view>
							</view>

						</scroll-view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 编辑时间段弹窗 -->
		<uni-popup type="center" ref="setTimeBox">
			<view class="setTime_Box">
				<view class="stbTitle">编辑时间段</view>
				<view class="tableTitle">
					<view class="ttCell">开始时间</view>
					<view>~</view>
					<view class="ttCell">结束时间</view>
					<view class="ttCell">价格(元)</view>
					<view class="operationCell">操作</view>
				</view>
				<view class="setTimeList">
					<block v-for="(item, index) in timeScale" :key="index">
						<view class="timeCell">
							<view class="timeInp">
								<input type="text" @input="e => editeTime(e, index, 'TimeStart')"
									:value="item.TimeStart" maxlength="10">
							</view>
							<view>~</view>
							<view class="timeInp">
								<input type="text" @input="e => editeTime(e, index, 'TimeEnd')" :value="item.TimeEnd"
									maxlength="10">
							</view>
							<view class="timeInp">
								<input type="text" @input="e => editeTime(e, index, 'Price')" :value="item.Price"
									maxlength="10">
							</view>
							<view class="opView">
								<view class="opBox">
									<view class="timeBtn" @click="addORreduce(index, 1)">增加</view>
									<view class="timeBtn deleteBtn" @click="addORreduce(index, -1)">删除</view>
								</view>

							</view>

						</view>
					</block>
				</view>
				<view class="bottomBtnBox">
					<view class="bbBtn bbB_none" @click="closeSetTime">关闭</view>
					<view class="bbBtn" @click="saveTime">保存</view>
				</view>

			</view>
		</uni-popup>

		<!-- 编辑房间弹窗 -->
		<uni-popup type="center" ref="setRoomBox">
			<view class="setTime_Box">
				<view class="stbTitle">编辑房间</view>
				<view class="tableTitle">
					<view class="ttCell rttCell">房间名称</view>
					<view class="operationCell roomoperationCell">操作</view>
				</view>
				<view class="setTimeList">
					<block v-for="(item, index) in roomList" :key="index">
						<view class="timeCell roomCell">
							<view class="timeInp">
								<input type="text" @input="e => editeRoom(e, index, 'RoomName')" :value="item.RoomName"
									maxlength="10">
							</view>
							<view class="opView roomopView">
								<view class="opBox">
									<view class="timeBtn" @click="saveRoom(item, index)">保存修改</view>
									<view class="timeBtn deleteBtn" @click="delRoom(item, index)">删除</view>
								</view>
							</view>

						</view>
					</block>
					<block>
						<view class="timeCell roomCell">
							<view class="timeInp">
								<input type="text" @input="e => editeRoom(e, 1, 'newRoomName')" :value="newRoomName"
									maxlength="10">
							</view>
							<view class="opView roomopView">
								<view class="opBox">
									<view class="timeBtn addBtn" @click="addRoom()">确认新增</view>
									<view class="timeBtn deleteBtn" style="opacity:0">删除</view>
								</view>
							</view>

						</view>
					</block>
				</view>
				<view class="bottomBtnBox">
					<view class="bbBtn bbB_none" @click="closeSetRoom">关闭</view>
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			shopId: null,
			inbg: 0,
			isVenue: 0,
			BarTitle: "",
			nowday: "",
			daylist: [],
			Timeperiod: [],
			timeScale: [],
			costlist: 14,
			summoney: 0,  //总价格
			fieldList: [],//场地二维数组
			roomList: [],//房间名称
			newRoomName: '',//新增的房间名称
			defaultTime: [
				{
					Price: 60,
					ShopID: 7029,
					TimeEnd: "10:00",
					TimeStart: "9:00",
				},
			]
		};
	},
	computed: {
		timeShowList() {
			let list = this.timeScale
			let newList = []
			for (let i = 0; i < list.length; i++) {
				if (i == 0) {
					newList.push(list[i].TimeStart)
				}
				newList.push(list[i].TimeEnd)
			}
			return newList
		}
	},
	onLoad(e) {
		this.shopId = e.shopId
		let nowtime = new Date();
		if (e.day) {
			this.nowday = e.day
		} else {
			this.nowday = this.$util.unixDatetime(nowtime, "yy-mm-dd")
		}
		this.getday();
		this.getTimeScaleList();
		this.getListDetail()
		this.getRoomName()
		this.takeTipsTime()
	},
	methods: {
		// 设置示例时间
		takeTipsTime(){
			let list = []
			for (let i = 0; i < 13; i++) {
				const data = {
					Price: 60,
					ShopID: this.shopId,
					TimeStart: `${i+9}:00`,
					TimeEnd: `${i+10}:00`,
				}
				list.push(data)
			}
			this.defaultTime = list
		},
		// 输入编辑的时间
		editeTime(e, index, type) {
			const { value, cursor } = e.detail
			let str = value.slice(0, 10)
			let data = { ...this.timeScale[index] }
			data[type] = str
			this.$set(this.timeScale, index, data)
		},
		// 输入编辑的房间名称
		editeRoom(e, index, type) {
			const { value, cursor } = e.detail
			let str = value.slice(0, 10)
			if (type == 'newRoomName') {
				this.newRoomName = str
			} else {
				let data = { ...this.roomList[index] }
				data[type] = str
				data.RoomCode = str
				this.$set(this.roomList, index, data)
			}

		},
		// 新增或删除时间段
		addORreduce(index, type) {
			if (type == 1) {
				const data = {
					TimeStart: '',
					TimeEnd: '',
					Price: this.timeScale[index].Price,
				}
				this.timeScale.splice(index + 1, 0, data)
			} else {
				this.timeScale.splice(index, 1)
			}
		},
		// 点击打开时间编辑弹窗
		async openSetTime() {
			await this.getTimeScaleList()
			this.$refs.setTimeBox.open();
			this.timeScale = this.timeScale.length>0? this.timeScale:this.defaultTime
		},
		// 关闭时间编辑弹窗
		closeSetTime() {
			this.$refs.setTimeBox.close();
		},
		// 保存时间
		saveTime() {
			let list = this.timeScale
			for (let i = 0; i < list.length; i++) {
				if (list[i].TimeStart == '') {
					this.$pv.msg(`第${i + 1}项开始时间不能为空`)
					return
				}
				if (list[i].TimeEnd == '') {
					this.$pv.msg(`第${i + 1}项结束时间不能为空`)
					return
				}
				if (list[i].Price == '') {
					this.$pv.msg(`第${i + 1}项价格不能为空`)
					return
				}
			}
			this.$pv.load('保存中', 0)
			let listJson = JSON.stringify(list)
			this.$api.post('/Shops/EditTime', {
				ShopID: this.shopId,
				OrderDataJson: listJson
			}).then(res => {
				const { code, data, message } = res
				if (code == 0) {
					this.getTimeScaleList()
					this.getListDetail()
					this.$pv.msg('保存成功')
					this.closeSetTime()
				} else {
					this.$pv.msg('保存失败')
				}
			}).finally(() => {
				this.$pv.closeLoad();
			})
		},

		// 点击房间名称编辑弹窗
		async openSetRoom() {
			await this.getRoomName()
			this.$refs.setRoomBox.open();
		},
		// 关闭房间名称编辑弹窗
		closeSetRoom() {
			this.$refs.setRoomBox.close();
		},
		// 保存房间名称
		async saveRoom(e, index) {
			const { ID, RoomCode, RoomName } = e
			if (RoomName == '') {
				this.$pv.msg('房间名称不能为空')
				return
			}
			this.$pv.load('加载中', 0)
			await this.$api.post('/ShopOrder/EditRoom', {
				ID,
				RoomCode,
				RoomName
			}).then(res => {
				const { code, data, message } = res
				if (code == 0) {

					this.$pv.msg('保存成功')
				} else {
					this.$pv.msg(message)
				}
			}).finally(() => {
				this.$pv.closeLoad();
			})
		},
		// 删除房间
		async delRoom(e, index) {
			const { ID } = e
			this.$pv.load('加载中', 0)
			await this.$api.post('/ShopOrder/DeleteRoom', {
				ID,
			}).then(res => {
				const { code, data, message } = res
				if (code == 0) {
					this.roomList.splice(index, 1)
					this.$pv.msg('删除成功')
				} else {
					this.$pv.msg(message)
				}
			}).finally(() => {
				this.$pv.closeLoad();
			})
		},
		// 新增房间
		async addRoom() {
			if (this.newRoomName == '') {
				this.$pv.msg('房间名称不能为空')
				return
			}
			this.$pv.load('加载中', 0)
			await this.$api.post('/ShopOrder/CreateRoom', {
				ShopID: this.shopId,
				RoomCode: this.newRoomName,
				RoomName: this.newRoomName
			}).then(res => {
				const { code, data, message } = res
				if (code == 0) {
					this.getRoomName()
					this.$pv.msg('新增成功')
					this.newRoomName = ''
				} else {
					this.$pv.msg(message)
				}
			}).finally(() => {
				this.$pv.closeLoad();
			})
		},
		//获取场地列表
		async getListDetail() {
			this.$pv.load('加载中', 0)
			await this.$api.post('/ShopOrder/GetShopTimeLayout', {
				ShopID: this.shopId,
				OrderDate: this.nowday
			}).then(res => {
				const { code, data, message } = res
				if (code == 0) {
					this.fieldList = data || []
				}
			}).finally(() => {
				this.$pv.closeLoad();
			})
		},

		//日期判断
		async getday() {

			for (let i = 0; i < 1; i++) {
				let nowtime = new Date();
				let time = nowtime.setDate(nowtime.getDate() + i);
				this.daylist.push({
					year: this.$util.unixDatetime(time, "yy-mm-dd"),
					day: this.$util.unixDatetime(time, "mm-dd"),
					week: this.getWeek(time),
				});
			}
		},
		// 获取时间刻度
		async getTimeScaleList() {
			let res = await this.$api.post('/ShopOrder/GetShopTimeRange', {
				ShopID: this.shopId,
				OrderDate: this.nowday
			})
			const { code, data, message } = res
			if (code == 0) {
				this.timeScale = data
				// for (let i = 0; i < data.length; i++) {
				// 	if (i == 0) {
				// 		this.timeScale.push(this.strReplace(data[i].TimeStart))
				// 	}
				// 	this.timeScale.push(this.strReplace(data[i].TimeEnd))
				// }
			}
		},
		// 获取房间名称
		async getRoomName() {
			let res = await this.$api.post('/ShopOrder/GetShopRooms', {
				ShopID: this.shopId,
			})
			const { code, data, message } = res
			if (code == 0) {
				this.roomList = data
			}
		},
		// 替换-为:
		strReplace(str) {
			return str.replace('-', ':')
		},
	},
};
</script>
<style lang="scss">
page {
	background-color: #f6f6f6;
}

view {
	box-sizing: border-box;
}

.daynav {
	width: 100%;
	height: 144rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;

	.setBox {
		display: flex;
	}

	.topBtn {
		border-radius: 10rpx;
		text-align: center;
		color: white;
		background: #409eff;
		font-size: 24rpx;
		padding: 16rpx 26rpx;
		margin: 0 10rpx;
	}

	.daytime {
		min-width: 96rpx;
		height: 96rpx;
		border-radius: 8rpx;
		background-color: #f4f4fb;
		margin-left: 24rpx;
		text-align: center;
		transition: 0.3s all;

		.day {
			color: #706eee;
			font-weight: 600;
			font-size: 28rpx;
		}

		.week {
			color: #706eee;
			font-size: 24rpx;
			margin-top: 4rpx;
			margin-bottom: 8rpx;
		}
	}
}

.Venuebox {
	width: 100%;
	display: flex;
	height: 1036rpx;

	.scroll-Y {
		display: flex;
	}

	.Venueleft {
		margin-left: 32rpx;
		margin-top: 24rpx;
		width: 200rpx;
		text-align: center;

		.noneBox {
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 16rpx;
			opacity: 0;
		}

		.time {
			border: 1rpx solid transparent;
			height: 72rpx;
			margin-bottom: 8rpx;
			font-size: 24rpx;
			color: #333333;
			transform: translateY(-20rpx);
		}
	}

	.scroll-X {
		display: flex;
	}

	.Venuerigth {
		width: 600rpx;
		display: flex;

		.placebox {
			margin-top: 24rpx;
			// margin-right: 8rpx;
			padding-right: 8rpx;
			text-align: center;

			.name {
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 16rpx;
				font-weight: bold;
			}

			.cost {
				width: 116rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 8rpx;
				border: 1rpx solid #706eee;
				background-color: #ffffff;
				margin-bottom: 8rpx;
				transition: 0.5s all;
			}

			.venuebg {
				background-color: #706EEE !important;
				color: #fff !important;
			}

			.fullVenue {
				background-color: #E6E6E6 !important;
				color: #999999 !important;
				border: 1rpx solid transparent;
			}
		}
	}
}



.setTime_Box {
	width: 700rpx;
	height: 1000rpx;
	background-color: white;
	border-radius: 16rpx;
	padding: 24rpx;
	display: flex;
	flex-direction: column;

	.stbTitle {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.tableTitle {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;

		.ttCell {
			width: 120rpx;
			text-align: center;
		}

		.rttCell {
			width: 260rpx;
		}

		.operationCell {
			width: 200rpx;
			text-align: center;
		}

		.roomoperationCell {
			width: 300rpx;
		}
	}

	.setTimeList {
		width: 100%;
		padding: 20rpx 0;
		flex: 1;
		overflow: auto;

		.timeCell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin: 10rpx 0;

			.timeInp {
				border: 2rpx solid #cccccc;
				padding: 10rpx;
				width: 120rpx;
				border-radius: 12rpx;
			}

			.opView {
				width: 200rpx;

				.opBox {
					display: flex;
					align-items: center;
					justify-content: space-around;
				}
			}

			.roomopView {
				width: 300rpx;
			}

			.timeBtn {
				// width: 80rpx;
				border-radius: 10rpx;
				text-align: center;
				color: white;
				background: #409eff;
				font-size: 24rpx;
				padding: 8rpx 16rpx;
			}

			.deleteBtn {
				background: #f56c6c;
			}

			.addBtn {
				background: #67c23a;
			}
		}

		.roomCell {
			.timeInp {
				width: 260rpx;
			}
		}
	}

	.bottomBtnBox {
		width: 100%;
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.bbBtn {
			border-radius: 10rpx;
			text-align: center;
			color: white;
			background: #67c23a;
			font-size: 32rpx;
			padding: 12rpx 20rpx;
			margin-left: 30rpx;
		}

		.bbB_none {
			background: white;
			border: 2rpx solid #dcdfe6;
			color: #606266;
		}
	}
}
</style>